<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	<style>
		.title {
			margin: 20px 15px 10px;
			color: #6d6d72;
			font-size: 15px;
		}
		
		#pic img {
			/*margin-left: 9%;
    		margin-top: 20%;
    		margin-bottom: 15%;*/
			/*padding: 30px 0 0 0;*/
			max-width: 100%;
		}
		
		p img {
			max-width: 100%;
			/*height: auto;*/
		}

	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
		<h1 class="mui-title">计算星座学</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<!--<span class="mui-icon mui-icon-home"></span>-->
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<!--<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>-->
			<span class="mui-tab-label">星座排名</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<!--<span class="mui-icon mui-icon-contact"></span>-->
			<span class="mui-tab-label">职业排名</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<!--<span class="mui-icon mui-icon-gear"></span>-->
			<span class="mui-tab-label">职业距离</span>
		</a>
	</nav>
	<div class="mui-content">
		<div class="mui-content-padded">
			<!--<p>
					<img src="images/0bg.gif"  />
				</p>-->



						<div id="tabbar" class="mui-control-content mui-active">
				<span id="lbresult">
				<div id="pic">
					<img id='mymap' src="images/0bg.jpg" usemap="#rouletteMap"/>
			</div>
			<map name="rouletteMap" id="rouletteMap">
                   	    <area date-name="Aquarius" shape="poly" coords="48,132,83,87,133,48,224,206,215,214,207,224" href="Aquarius.html" alt='水瓶' data-index="0"  />
                        <area date-name="Capricorn" shape="poly" coords="134,48,188,24,248,17,250,199,238,201,226,205" href="Capricorn.html" alt='摩羯' data-index="1" />
                        <area date-name="Sagittarius" shape="poly" coords="250,17,306,24,365,48,274,205,264,202,251,200" href="Sagittarius.html" alt='射手' data-index="2"/>
                        <area date-name="Scorpio" shape="poly" coords="366,49,412,82,450,132,292,224,284,214,275,206" href="Scorpio.html" alt='天蝎' data-index="3"/>
                        <area date-name="Libra" shape="poly" coords="451,134,474,189,482,248,299,248,293,225" href="Libra.html" alt="天秤" data-index="4" />
                        <area date-name="Virgo" shape="poly" coords="299,250,482,249,474,311,451,364,293,273" href="Virgo.html" alt='处女' data-index="5"/>
                        <area date-name="leo" shape="poly" coords="451,366,413,415,367,449,274,291,285,283,292,274" href="leo.html" alt='狮子' data-index="6"/>
                        <area date-name="Cancer" shape="poly" coords="250,298,274,293,366,450,315,472,250,482" href="Cancer.html" alt='巨蟹' data-index="7" />
                        <area date-name="Gemini" shape="poly" coords="134,451,189,474,248,482,249,299,226,292" href="Gemini.html" alt='双子' data-index="8"/>
                        <area date-name="Taurus" shape="poly" coords="48,366,83,413,132,450,224,293,207,274" href="Taurus.html" alt='金牛' data-index="9"/>
                        <area date-name="Aries" shape="poly" coords="48,366,25,311,16,250,199,250,202,263,206,274" href="Aries.html" alt='白羊' data-index="10"/>
                        <area date-name="Pisces" shape="poly" coords="48,133,25,185,17,248,200,248,202,236,206,224" href="Pisces.html" class="box" alt='双鱼' data-index="11"/>
                    
                   
                    
                    </map>  
                   </span>
			</div>

			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第2个子页面</div>

			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="mui-card">
					<ul class="mui-table-view mui-table-view-chevron">
						<!--<li class="mui-table-view-cell">card（圆角列表）
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</li>-->
						<li class="mui-table-view-cell">职业选择
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">演员</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">演员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">成人电影演员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">喜剧演员</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">建筑师</a>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">艺术家</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">艺术家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">音乐家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">画家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">歌唱家</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">无神论者</a>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">运动员</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">运动员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">国际象棋手</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">自行车运动员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">足球运动员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">相扑运动员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">兵乓球运动员</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">商人</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">CEO</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">厨师</a>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">宗教人士</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">大主教</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">神职人员</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">教皇</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">圣徒</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">罪犯</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学家</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">工程师</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">法官</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">同性恋</a>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">文学家</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">小说家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诗人</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">作家</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学奖</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学奖</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">文学奖</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">和平奖</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理奖</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生理或医学奖</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">哲学家</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">花花公子封面女郎</a>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">政治家</a>
						</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">科学家</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">科学家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生物学家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">计算机科学家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">数学家</a>
								</li>
								<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理学家</a>
								</li>
							</ul>
						</li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">间谍</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="tabbar-with-map" class="mui-control-content">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell"><a href="g1.html" class="mui-navigate-right">演员</a></li>
					<li class="mui-table-view-cell"><a href="g2.html" class="mui-navigate-right">建筑师</a></li>
					<li class="mui-table-view-cell"><a href="g3.html" class="mui-navigate-right">无神论者</a></li>
					<li class="mui-table-view-cell"><a href="g4.html" class="mui-navigate-right">生物学家</a></li>
					<li class="mui-table-view-cell"><a href="g5.html" class="mui-navigate-right">CEO</a></li>
					<li class="mui-table-view-cell"><a href="g6.html" class="mui-navigate-right">厨师</a></li>
					<li class="mui-table-view-cell"><a href="g7.html" class="mui-navigate-right">化学家</a></li>
					<li class="mui-table-view-cell"><a href="g8.html" class="mui-navigate-right">象棋运动员</a></li>
					<li class="mui-table-view-cell"><a href="g9.html" class="mui-navigate-right">计算机科学家</a></li>
					<li class="mui-table-view-cell"><a href="g10.html" class="mui-navigate-right">同性恋</a></li>
					<li class="mui-table-view-cell"><a href="g11.html" class="mui-navigate-right">数学家</a></li>
					<li class="mui-table-view-cell"><a href="g12.html" class="mui-navigate-right">小说家</a></li>
					<li class="mui-table-view-cell"><a href="g13.html" class="mui-navigate-right">哲学家</a></li>
					<li class="mui-table-view-cell"><a href="g14.html" class="mui-navigate-right">物理学家</a></li>
					<li class="mui-table-view-cell"><a href="g15.html" class="mui-navigate-right">诗人</a></li>
					<li class="mui-table-view-cell"><a href="g16.html" class="mui-navigate-right">间谍</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script src="js/mui.min.js"></script>
<script>
	mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	var picwidth;	
	var area = [];
	getpicwidth()
	window.onload=function(){
		getArea()
		setArea()
	}

	window.onresize = function () {
		setArea()
	}

	function getpicwidth(){
		var pi = document.getElementById('mymap');
		var img = new Image();
		img.src = pi.src;
		img.onload=function(){
			picwidth=this.width;
		}
	}
	function getArea(){
		var rouletteMap = document.getElementById("rouletteMap").getElementsByTagName("area");
		for(var j = 0; j<12;j++){
			area[j] = rouletteMap[j].coords
		}
	}
	function setArea(){
		var element = document.getElementById("rouletteMap").getElementsByTagName("area");
		var radio = getwidth();
		// console.log(element.length)
		for(var j = 0; j<12;j++){
			var each = area[j]
			each = each.split(",");
			//获取每个坐标点  
			for (var i = 0; i < each.length; i++) {
				each[i] = Math.round(parseInt(each[i]) * radio).toString(); //x坐标  
			}
			//生成新的坐标点  
			var newPosition = "";
			for (var i = 0; i < each.length; i++) {
				newPosition += each[i];
				if (i < each.length - 1) {
					newPosition += ",";
				}
			}
			element[j].setAttribute("coords", newPosition);
		}
	}

	function getwidth(){
		var mymap = document.getElementById('mymap');
		return mymap.width/picwidth;
	}

	
</script>
<!--<script type="text/javascript" src="js/ts.min.js"></script>-->
<script type="text/javascript" src="js/page/index/index.tpl.min.js"></script>

</html>